<template>
  <div class="tool-return-page">
    <el-card shadow="never" class="breadcrumb-card">
      <div class="breadcrumb-content">
        <div class="breadcrumb-title">
          <div class="breadcrumb-icon-wrapper">
            <el-icon class="breadcrumb-icon">
              <Collection />
            </el-icon>
          </div>
          <div>
            <p class="breadcrumb-subtitle">工具管理 · 工具归还</p>
            <h2 class="breadcrumb-heading">工具归还记录</h2>
          </div>
        </div>
        <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb-nav">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>工具管理</el-breadcrumb-item>
          <el-breadcrumb-item>工具归还</el-breadcrumb-item>
          <el-breadcrumb-item>工具归还列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-card>

    <el-card shadow="never" class="search-card">
      <div class="search-header">
        <div class="search-title">
          <el-icon class="search-title-icon"><Search /></el-icon>
          <span>筛选查询</span>
        </div>
      </div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="关键词">
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入归还编号/名称"
            clearable
            class="search-input"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="归还人">
          <el-select
            v-model="searchForm.returnerId"
            placeholder="请选择归还人"
            clearable
            class="search-select"
          >
            <el-option
              v-for="item in returnerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select
            v-model="searchForm.borrowDept"
            placeholder="请选择部门"
            clearable
            class="search-select"
          >
            <el-option
              v-for="item in departmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.returnStatus"
            placeholder="请选择状态"
            clearable
            class="search-select"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="search-actions">
          <el-button @click="handleReset" class="reset-btn" :icon="Refresh"
            >重置</el-button
          >
          <el-button
            type="primary"
            :loading="loading"
            @click="handleSearch"
            :icon="Search"
            class="search-btn"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="table-card">
      <div class="table-header">
        <div class="table-title">
          <el-icon class="table-title-icon"><List /></el-icon>
          <span>工具归还列表</span>
          <el-tag size="small" effect="plain" class="list-tag">列表视图</el-tag>
          <el-tag
            v-if="multipleSelection.length > 0"
            size="small"
            type="info"
            class="selection-tag"
          >
            已选择 {{ multipleSelection.length }} 项
          </el-tag>
        </div>
        <div class="table-operations">
          <el-button
            type="primary"
            size="default"
            @click="handleCreate"
            :icon="Plus"
            class="action-btn"
          >
            新增
          </el-button>
          <el-button
            type="danger"
            size="default"
            :disabled="!multipleSelection.length"
            @click="handleBatchDelete"
            :icon="Delete"
            class="action-btn"
          >
            批量删除
          </el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        class="data-table"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column type="index" label="序号" width="70" align="center">
          <template #default="{ $index }">
            <span class="index-number">{{
              $index + 1 + (pagination.Pageindex - 1) * pagination.PageSize
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="returnNo" label="归还编号" min-width="160">
          <template #default="scope">
            <span class="table-cell-primary">{{ scope.row.returnNo }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="returnName" label="归还名称" min-width="160">
          <template #default="scope">
            <span class="table-cell-text">{{ scope.row.returnName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="borrowNo" label="关联领用单编号" min-width="160">
          <template #default="scope">
            <el-tag
              size="small"
              effect="plain"
              type="info"
              v-if="scope.row.borrowNo"
            >
              {{ scope.row.borrowNo }}
            </el-tag>
            <span v-else class="table-cell-empty">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="returnTime" label="归还时间" min-width="180">
          <template #default="scope">
            <span class="table-cell-time">{{
              formatDate(scope.row.returnTime)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="returnerName" label="归还人" min-width="120">
          <template #default="scope">
            <div class="table-cell-user">
              <el-icon class="user-icon"><User /></el-icon>
              <span>{{ scope.row.returnerName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="borrowDeptName" label="所属部门" min-width="140">
          <template #default="scope">
            <span class="table-cell-text">{{
              scope.row.borrowDeptName || "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="detailCount"
          label="明细数"
          width="100"
          align="center"
        >
          <template #default="scope">
            <el-tag size="small" effect="plain" type="info" class="count-tag">
              {{ scope.row.detailCount || 0 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="returnStatus"
          label="状态"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-tag
              :type="mapStatusTag(scope.row.returnStatus)"
              effect="dark"
              class="status-tag"
            >
              {{ mapStatusLabel(scope.row.returnStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="200"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span class="table-cell-text">{{ scope.row.remark || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button
                type="primary"
                link
                size="small"
                @click="handleEdit(row)"
                :icon="Edit"
                class="action-link-btn"
                >编辑</el-button
              >
              <el-divider direction="vertical" />
              <el-button
                type="danger"
                link
                size="small"
                @click="handleDelete(row)"
                :icon="Delete"
                class="action-link-btn"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-pagination">
        <div class="pagination-wrapper">
          <div class="pagination-info">
            <span
              >共 <strong>{{ pagination.totalCount }}</strong> 条记录</span
            >
          </div>
          <div class="pagination-controls">
            <el-button
              size="small"
              @click="gotoFirst"
              :disabled="pagination.Pageindex === 1"
              :icon="DArrowLeft"
              class="pagination-btn"
              >首页</el-button
            >
            <el-button
              size="small"
              @click="gotoPrev"
              :disabled="pagination.Pageindex === 1"
              :icon="ArrowLeft"
              class="pagination-btn"
              >上一页</el-button
            >
            <el-pagination
              v-model:current-page="pagination.Pageindex"
              v-model:page-size="pagination.PageSize"
              :page-sizes="[10, 20, 50, 100]"
              background
              layout="sizes, prev, pager, next, jumper"
              :total="pagination.totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              class="custom-pagination"
            />
            <el-button
              size="small"
              @click="gotoNext"
              :disabled="pagination.Pageindex >= totalPages"
              :icon="ArrowRight"
              class="pagination-btn"
              >下一页</el-button
            >
            <el-button
              size="small"
              @click="gotoLast"
              :disabled="pagination.Pageindex >= totalPages"
              :icon="DArrowRight"
              class="pagination-btn"
              >尾页</el-button
            >
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from "vue";
import https from "@/Http/http";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  ArrowRight,
  Collection,
  Search,
  Refresh,
  Plus,
  Delete,
  Edit,
  List,
  User,
  ArrowLeft,
  DArrowLeft,
  DArrowRight,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

interface ToolReturnRow {
  id: number;
  returnNo: string;
  returnName: string;
  borrowNo?: string;
  returnTime: string;
  returnerName: string;
  returnerId?: number;
  borrowDept?: number;
  borrowDeptName?: string;
  detailCount?: number;
  returnStatus: number;
  remark?: string;
  borrowOrderId?: number;
}

const tableData = ref<ToolReturnRow[]>([]);
const loading = ref(false);
const multipleSelection = ref<ToolReturnRow[]>([]);
const router = useRouter();

const pagination = reactive({
  Pageindex: 1,
  PageSize: 10,
  totalCount: 0,
});

const searchForm = reactive({
  keyword: "",
  returnerId: "",
  borrowDept: "",
  returnStatus: "",
});

const returnerOptions = [
  { label: "赵子龙", value: 1001 },
  { label: "关云长", value: 1002 },
  { label: "张翼德", value: 1003 },
];

const departmentOptions = [
  { label: "研发一部", value: 2001 },
  { label: "制造中心", value: 2002 },
  { label: "质检科", value: 2003 },
];

const statusOptions = [
  { label: "待确认", value: 0 },
  { label: "已完成", value: 1 },
];

const fetchList = async () => {
  loading.value = true;
  try {
    const params: any = {
      Pageindex: pagination.Pageindex,
      PageSize: pagination.PageSize,
      ReturnNo: searchForm.keyword || undefined,
      ReturnName: searchForm.keyword || undefined,
      ReturnerId: searchForm.returnerId || undefined,
      BorrowDept: searchForm.borrowDept || undefined,
      ReturnStatus:
        searchForm.returnStatus !== "" ? searchForm.returnStatus : undefined,
    };

    const { data } = await https.Reads.get(
      "/Applicae/ToolborrowheaderReturnlist",
      { params }
    );

    tableData.value = data.data ?? [];
    pagination.totalCount = data.totalCount ?? 0;
  } catch (error) {
    ElMessage.error("获取工具归还列表失败，请稍后重试");
    tableData.value = [];
    pagination.totalCount = 0;
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  pagination.Pageindex = 1;
  fetchList();
};

const handleReset = () => {
  searchForm.keyword = "";
  searchForm.returnerId = "";
  searchForm.borrowDept = "";
  searchForm.returnStatus = "";
  handleSearch();
};

const handleSizeChange = (val: number) => {
  pagination.PageSize = val;
  pagination.Pageindex = 1;
  fetchList();
};

const handleCurrentChange = (val: number) => {
  pagination.Pageindex = val;
  fetchList();
};

const totalPages = computed(() =>
  Math.max(1, Math.ceil(pagination.totalCount / pagination.PageSize))
);

const gotoFirst = () => {
  if (pagination.Pageindex !== 1) {
    pagination.Pageindex = 1;
    fetchList();
  }
};

const gotoPrev = () => {
  if (pagination.Pageindex > 1) {
    pagination.Pageindex -= 1;
    fetchList();
  }
};

const gotoNext = () => {
  if (pagination.Pageindex < totalPages.value) {
    pagination.Pageindex += 1;
    fetchList();
  }
};

const gotoLast = () => {
  if (pagination.Pageindex !== totalPages.value) {
    pagination.Pageindex = totalPages.value;
    fetchList();
  }
};

const handleSelectionChange = (rows: ToolReturnRow[]) => {
  multipleSelection.value = rows;
};

const handleCreate = () => {
  router.push("/ToolreturnorderlistAdd");
};

const handleBatchDelete = async () => {
  if (!multipleSelection.value.length) {
    ElMessage.warning("请先选择需要删除的记录");
    return;
  }
  try {
    await ElMessageBox.confirm("确定批量删除选中的记录吗？", "提示", {
      type: "warning",
    });
    const ids = multipleSelection.value.map((r) => r.id);
    const res = await https.Writes.delete(
      "/Appliance/Tool_return_orderDeletes/batch",
      { data: { Ids: ids } }
    );
    if (res.data && res.data.code === 1) {
      ElMessage.success("批量删除成功");
    } else {
      ElMessage.success("已提交批量删除");
    }
    fetchList();
  } catch (e) {
    // 用户取消或请求失败
  }
};

const handleEdit = (row: ToolReturnRow) => {
  const query: any = {
    id: row.id,
    returnNo: row.returnNo,
    returnName: row.returnName,
    returnerId: row.returnerId,
    borrowOrderId: row.borrowOrderId,
    returnTime: row.returnTime,
    returnStatus: row.returnStatus,
    remark: row.remark,
  };
  router.push({ path: "/ToolreturnorderlistAdd", query });
};

const handleDelete = async (row: ToolReturnRow) => {
  try {
    await ElMessageBox.confirm("确定删除该记录吗？", "提示", {
      type: "warning",
    });
    const res = await https.Writes.delete(
      "/Appliance/Tool_return_orderDelete",
      { data: { id: row.id } }
    );
    if (res.data && res.data.code === 1) {
      ElMessage.success("删除成功");
    } else {
      ElMessage.success("删除提交完成");
    }
    fetchList();
  } catch (e) {
    // 用户取消或请求失败
  }
};

const mapStatusLabel = (status: number) => {
  const match = statusOptions.find((item) => item.value === status);
  return match ? match.label : "-";
};

const mapStatusTag = (status: number) => {
  switch (status) {
    case 0:
      return "warning";
    case 1:
      return "success";
    default:
      return "default";
  }
};

const formatDate = (value?: string) => {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return `${date.getFullYear()}-${(date.getMonth() + 1)
    .toString()
    .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
    .getHours()
    .toString()
    .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
};

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: ToolReturnRow;
  rowIndex: number;
}) => {
  return rowIndex % 2 === 1 ? "table-row-even" : "";
};

onMounted(() => {
  fetchList();
});
</script>

<style scoped>
.tool-return-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 面包屑卡片 */
.breadcrumb-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transition: all 0.3s ease;
}

.breadcrumb-card:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
}

.breadcrumb-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.breadcrumb-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.breadcrumb-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.breadcrumb-icon {
  font-size: 32px;
  color: #ffffff;
}

.breadcrumb-subtitle {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.breadcrumb-heading {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.breadcrumb-nav :deep(.el-breadcrumb__inner) {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
}

.breadcrumb-nav :deep(.el-breadcrumb__inner.is-link) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.breadcrumb-nav :deep(.el-breadcrumb__inner.is-link:hover) {
  color: #ffffff !important;
}

/* 搜索卡片 */
.search-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.search-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.search-header {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f2f5;
}

.search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-title-icon {
  font-size: 18px;
  color: #409eff;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
}

.search-form :deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  padding-bottom: 4px;
}

.search-input,
.search-select {
  width: 240px;
}

.search-actions {
  margin-left: auto;
  display: flex;
  gap: 12px;
}

.reset-btn,
.search-btn {
  padding: 10px 24px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.reset-btn {
  border-color: #dcdfe6;
  color: #606266;
}

.reset-btn:hover {
  border-color: #409eff;
  color: #409eff;
  background: #ecf5ff;
}

.search-btn {
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.search-btn:hover {
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

/* 表格卡片 */
.table-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.table-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f2f5;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.table-title-icon {
  font-size: 20px;
  color: #409eff;
}

.list-tag {
  margin-left: 8px;
  border-radius: 6px;
}

.selection-tag {
  margin-left: 8px;
  border-radius: 6px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.table-operations {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 10px 20px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-btn:active:not(:disabled) {
  transform: translateY(0);
}

/* 表格样式 */
.data-table {
  border-radius: 8px;
  overflow: hidden;
}

.data-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.data-table :deep(.el-table__header th) {
  background: #f8f9fa;
  color: #303133;
  font-weight: 600;
  border-bottom: 2px solid #e4e7ed;
  padding: 16px 0;
}

.data-table :deep(.el-table__body tr:hover > td) {
  background: #f0f9ff !important;
}

.data-table :deep(.table-row-even) {
  background: #fafbfc;
}

.data-table :deep(.el-table__row) {
  transition: all 0.2s ease;
}

.data-table :deep(.el-table__row:hover) {
  transform: scale(1.001);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.data-table :deep(.el-table td) {
  padding: 16px 0;
  border-bottom: 1px solid #f0f2f5;
}

.index-number {
  font-weight: 600;
  color: #909399;
}

.table-cell-primary {
  color: #409eff;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.table-cell-primary:hover {
  color: #66b1ff;
}

.table-cell-text {
  color: #606266;
}

.table-cell-time {
  color: #909399;
  font-size: 13px;
}

.table-cell-empty {
  color: #c0c4cc;
}

.table-cell-user {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
}

.user-icon {
  font-size: 16px;
  color: #909399;
}

.count-tag {
  border-radius: 12px;
  font-weight: 500;
}

.status-tag {
  border-radius: 12px;
  font-weight: 500;
  padding: 4px 12px;
}

.action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.action-link-btn {
  padding: 4px 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.action-link-btn:hover {
  background: #f0f9ff;
  transform: translateY(-1px);
}

.action-buttons :deep(.el-divider--vertical) {
  margin: 0 4px;
  height: 14px;
}

/* 分页样式 */
.table-pagination {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #f0f2f5;
}

.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

.pagination-info strong {
  color: #409eff;
  font-weight: 600;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.custom-pagination {
  margin: 0 8px;
}

.custom-pagination :deep(.el-pagination__total) {
  font-weight: 500;
  color: #606266;
}

.custom-pagination :deep(.el-pager li) {
  border-radius: 6px;
  margin: 0 2px;
  transition: all 0.2s ease;
}

.custom-pagination :deep(.el-pager li:hover) {
  color: #409eff;
  background: #ecf5ff;
}

.custom-pagination :deep(.el-pager li.is-active) {
  background: #409eff;
  color: #ffffff;
  font-weight: 600;
}

.custom-pagination :deep(.btn-prev),
.custom-pagination :deep(.btn-next) {
  border-radius: 6px;
  transition: all 0.2s ease;
}

.custom-pagination :deep(.btn-prev:hover),
.custom-pagination :deep(.btn-next:hover) {
  color: #409eff;
  background: #ecf5ff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-input,
  .search-select {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .tool-return-page {
    padding: 12px;
    gap: 12px;
  }

  .breadcrumb-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input,
  .search-select {
    width: 100%;
  }

  .search-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pagination-wrapper {
    flex-direction: column;
    align-items: center;
  }
}
</style>
